<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
  <link rel="stylesheet" href="../../plugin/summernote/summernote.css">
  <link rel="stylesheet" href="../../system/css/common.css">
  
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition sidebar-mini gray-bg">
<div class="wrapper">
  <section class="content">
    <!-- Small boxes (Stat box) -->
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>150</h3>
            <p>新增订单</p>
          </div>
          <div class="icon">
            <i class="ion ion-bag"></i>
          </div>
          <a href="#" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
          <div class="inner">
            <h3>53<sup style="font-size: 20px">%</sup></h3>
            <p>退回率</p>
          </div>
          <div class="icon">
            <i class="ion ion-stats-bars"></i>
          </div>
          <a href="#" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
          <div class="inner">
            <h3>44</h3>
            <p>用户注册</p>
          </div>
          <div class="icon">
            <i class="ion ion-person-add"></i>
          </div>
          <a href="#" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
          <div class="inner">
            <h3>65</h3>
            <p>访客数</p>
          </div>
          <div class="icon">
            <i class="ion ion-pie-graph"></i>
          </div>
          <a href="#" class="small-box-footer">查看更多 <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->
    <!-- Main row -->
    <div class="row">
      <!-- Left col -->
      <section class="col-lg-7 connectedSortable">
        <!-- Chat box -->
        <div class="box box-success">
          <div class="box-header">
            <i class="fa fa-comments-o"></i>
  
            <h3 class="box-title">聊天</h3>
  
            <div class="box-tools pull-right" data-toggle="tooltip" title="Status">
              <div class="btn-group" data-toggle="btn-toggle">
                <button type="button" class="btn btn-default btn-sm active"><i class="fa fa-square text-green"></i>
                </button>
                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-square text-red"></i></button>
              </div>
            </div>
          </div>
          <div class="box-body chat" id="chat-box">
            <!-- chat item -->
            <div class="item">
              <img src="../../image/nora.jpg" alt="user image" class="online">
  
              <p class="message">
                <a href="#" class="name">
                  <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 2:15</small>
                  Mike Doe
                </a>
                我想和你见面，讨论一下关于新主题到来的最新消息。他们说这将是市场上最好的主题之一
              </p>
              <div class="attachment">
                <h4>附件:</h4>
                <p class="filename">
                  主题缩略图.jpg
                </p>
                <div class="pull-right">
                  <button type="button" class="btn btn-primary btn-sm btn-flat">打开</button>
                </div>
              </div>
              <!-- /.attachment -->
            </div>
            <!-- /.item -->
            <!-- chat item -->
            <div class="item">
              <img src="../../image/nadia.jpg" alt="user image" class="offline">
              <p class="message">
                <a href="#" class="name">
                  <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:15</small>
                  Alexander Pierce
                </a>
                我想和你见面，讨论一下关于新主题到来的最新消息。他们说这将是市场上最好的主题之一
              </p>
            </div>
            <!-- /.item -->
            <!-- chat item -->
            <div class="item">
              <img src="../../image/nora.jpg" alt="user image" class="offline">
              <p class="message">
                <a href="#" class="name">
                  <small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 5:30</small>
                  Susan Doe
                </a>
                我想和你见面，讨论一下关于新主题到来的最新消息。他们说这将是市场上最好的主题之一
              </p>
            </div>
            <!-- /.item -->
          </div>
          <!-- /.chat -->
          <div class="box-footer">
            <div class="input-group">
              <input class="form-control" placeholder="输入内容...">
  
              <div class="input-group-btn">
                <button type="button" class="btn btn-success"><i class="fa fa-plus"></i></button>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box (chat box) -->
  
        <!-- quick email widget -->
        <div class="box box-info">
          <div class="box-header">
            <i class="fa fa-envelope"></i>
            <h3 class="box-title">邮件发送</h3>
            <!-- tools box -->
            <div class="pull-right box-tools">
				<button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove">
				<i class="fa fa-times"></i>
				</button>
            </div>
            <!-- /. tools -->
          </div>
          <div class="box-body">
            <form action="#" method="post">
				<div class="form-group">
					<input type="email" class="form-control" name="emailto" placeholder="收件人:">
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="subject" placeholder="主题">
				</div>
				<div>
					<input id="content" name="content" type="hidden">
					<div id="summernote"></div>
				</div>
            </form>
          </div>
          <div class="box-footer clearfix">
            <button type="button" class="pull-right btn btn-default" id="sendEmail">
				发送<i class="fa fa-arrow-circle-right"></i>
			</button>
          </div>
        </div>
  
      </section>
      <!-- /.Left col -->
      <!-- right col (We are only adding the ID to make the widgets sortable)-->
      <section class="col-lg-5 connectedSortable">
  
        <!-- Map box -->
        <div class="box box-solid">
          <div class="box-header">
            <!-- tools box -->
			<div class="pull-right box-tools">
			  <!-- button with a dropdown -->
			  <div class="btn-group">
			    <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
			      <i class="fa fa-bars"></i></button>
			    <ul class="dropdown-menu pull-right" role="menu">
			      <li><a href="#">添加新事件</a></li>
			      <li><a href="#">清除事件</a></li>
			      <li class="divider"></li>
			      <li><a href="#">查看地图</a></li>
			    </ul>
			  </div>
			  <button type="button" class="btn btn-sm" data-widget="collapse">
				<i class="fa fa-minus"></i>
			  </button>
			  <button type="button" class="btn btn-sm" data-widget="remove">
				<i class="fa fa-times"></i>
			  </button>
			</div>
            <!-- /. tools -->
            <i class="fa fa-mobile-phone"></i>
            <h3 class="box-title">
              手机销量
            </h3>
          </div>
          <div class="box-body">
			<div style="height: 450px; width: 100%;" id="echarts-map-chart"></div>
          </div>
          <!-- /.box-body-->
          <div class="box-footer no-border">
            <div class="row">
              <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                <div id="sparkline-1"></div>
                <div class="knob-label">Visitors</div>
              </div>
              <!-- ./col -->
              <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                <div id="sparkline-2"></div>
                <div class="knob-label">Online</div>
              </div>
              <!-- ./col -->
              <div class="col-xs-4 text-center">
                <div id="sparkline-3"></div>
                <div class="knob-label">Exists</div>
              </div>
              <!-- ./col -->
            </div>
            <!-- /.row -->
          </div>
        </div>
        <!-- /.box -->
		
		<!-- TO DO List -->
		<div class="box box-primary">
		  <div class="box-header">
		    <i class="ion ion-clipboard"></i>
		    <h3 class="box-title">待办事项</h3>
		    <div class="box-tools pull-right">
		      <ul class="pagination pagination-sm inline">
		        <li><a href="#">&laquo;</a></li>
		        <li><a href="#">1</a></li>
		        <li><a href="#">2</a></li>
		        <li><a href="#">3</a></li>
		        <li><a href="#">&raquo;</a></li>
		      </ul>
		    </div>
		  </div>
		  <!-- /.box-header -->
		  <div class="box-body">
		    <!-- See dist/js/pages/dashboard.js to activate the todoList plugin -->
		    <ul class="todo-list">
		      <li>
		        <!-- drag handle -->
		        <span class="handle">
				  <i class="fa fa-ellipsis-v"></i>
				  <i class="fa fa-ellipsis-v"></i>
				</span>
		        <!-- checkbox -->
		        <input type="checkbox" value="">
		        <!-- todo text -->
		        <span class="text">设计一个漂亮的主题</span>
		        <!-- Emphasis label -->
		        <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 分钟</small>
		        <!-- General tools such as edit or delete-->
		        <div class="tools">
		          <i class="fa fa-edit"></i>
		          <i class="fa fa-trash-o"></i>
		        </div>
		      </li>
		      <li>
				<span class="handle">
				  <i class="fa fa-ellipsis-v"></i>
				  <i class="fa fa-ellipsis-v"></i>
				</span>
		        <input type="checkbox" value="">
		        <span class="text">使主题具有响应性</span>
		        <small class="label label-info"><i class="fa fa-clock-o"></i> 4 小时</small>
		        <div class="tools">
		          <i class="fa fa-edit"></i>
		          <i class="fa fa-trash-o"></i>
		        </div>
		      </li>
		      <li>
				<span class="handle">
				  <i class="fa fa-ellipsis-v"></i>
				  <i class="fa fa-ellipsis-v"></i>
				</span>
		        <input type="checkbox" value="">
		        <span class="text">让主题像星星一样闪耀</span>
		        <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 天</small>
		        <div class="tools">
		          <i class="fa fa-edit"></i>
		          <i class="fa fa-trash-o"></i>
		        </div>
		      </li>
		      <li>
				<span class="handle">
				  <i class="fa fa-ellipsis-v"></i>
				  <i class="fa fa-ellipsis-v"></i>
				</span>
		        <input type="checkbox" value="">
		        <span class="text">让主题像星星一样闪耀</span>
		        <small class="label label-success"><i class="fa fa-clock-o"></i> 3 天</small>
		        <div class="tools">
		          <i class="fa fa-edit"></i>
		          <i class="fa fa-trash-o"></i>
		        </div>
		      </li>
		      <li>
				<span class="handle">
				  <i class="fa fa-ellipsis-v"></i>
				  <i class="fa fa-ellipsis-v"></i>
				</span>
		        <input type="checkbox" value="">
		        <span class="text">检查您的消息和通知</span>
		        <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 周</small>
		        <div class="tools">
		          <i class="fa fa-edit"></i>
		          <i class="fa fa-trash-o"></i>
		        </div>
		      </li>
		      <li>
				<span class="handle">
				  <i class="fa fa-ellipsis-v"></i>
				  <i class="fa fa-ellipsis-v"></i>
				</span>
		        <input type="checkbox" value="">
		        <span class="text">让主题像星星一样闪耀</span>
		        <small class="label label-default"><i class="fa fa-clock-o"></i> 1 月</small>
		        <div class="tools">
		          <i class="fa fa-edit"></i>
		          <i class="fa fa-trash-o"></i>
		        </div>
		      </li>
		    </ul>
		  </div>
		  <!-- /.box-body -->
		  <div class="box-footer clearfix no-border">
		    <button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i>添加</button>
		  </div>
		</div>
		<!-- /.box -->
  
      </section>
      <!-- right col -->
    </div>
    <!-- /.row (main row) -->
  
  </section>
  <!-- /.content -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<script src="../../plugin/jquery/jquery.min.js"></script>
<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugin/fastclick/fastclick.js"></script>
<script src="../../adminlte/js/adminlte.min.js"></script>
<script src="../../plugin/summernote/summernote.min.js"></script>
<script src="../../plugin/summernote/summernote-zh-CN.js"></script>
<script src="../../plugin/echarts/echarts-all.js"></script>
<script src="../../system/js/common.js"></script>
<script>
	$(function() {
		// 富文本编辑器
		$('#summernote').summernote({
			placeholder: '请输入文本内容',
			height : 192,
			lang : 'zh-CN',
			followingToolbar: false,
			callbacks: {
				onImageUpload: function (files) {
					//sendFile(files[0], this);
				}
			}
		});
		// 地图
		var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
		var mapoption = {
			tooltip : {
				trigger: 'item',
				formatter: function(data){
					if( !isNaN(data.value) ){
						return data.name+"："+data.value + " (部)";
					} else {
						return data.name+"：0 (部)";
					}
				}
			},
			legend: {
				orient: 'vertical',
				x:'left',
				data:['华为手机','小米手机','OPPO手机']
			},
			visualMap: {
				min: 0,
				max: 10000,
				left: 26,
				bottom: 40,
				showLabel: !0,
				text: ["高", "低"],
				pieces: [
					{ gte: 1000, label: '1000人以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
					{ gte: 500, lte: 999, label: '500-999人', color: '#6797ef' },
					{ gte: 100, lte: 499, label: '100-499人', color: '#96b5ef' },
					{ lte: 9, label: '1-9人', color: '#d1d4da' } 
				],
				textStyle: {
					color: '#737373'
				},
				show: !0
			},
			toolbox: {
				show: true,
				orient : 'vertical',
				x: 'right',
				y: 'center',
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			roamController: {
				show: true,
				x: 'right',
				mapTypeControl: {
					'china': true
				}
			},
			series : [
				{
					name: '华为手机',
					type: 'map',
					mapType: 'china',
					roam: false,
					itemStyle:{
						normal:{label:{show:false}},
						emphasis:{label:{show:false}}
					},
					data:[
						{name: '北京市',value: Math.round(Math.random()*1000)},
						{name: '天津市',value: Math.round(Math.random()*1000)},
						{name: '上海市',value: Math.round(Math.random()*1000)},
						{name: '重庆市',value: Math.round(Math.random()*1000)},
						{name: '河北省',value: Math.round(Math.random()*1000)},
						{name: '河南省',value: Math.round(Math.random()*1000)},
						{name: '云南省',value: Math.round(Math.random()*1000)},
						{name: '辽宁省',value: Math.round(Math.random()*1000)},
						{name: '黑龙江省',value: Math.round(Math.random()*1000)},
						{name: '湖南省',value: Math.round(Math.random()*1000)},
						{name: '安徽省',value: Math.round(Math.random()*1000)},
						{name: '山东省',value: Math.round(Math.random()*1000)},
						{name: '新疆维吾尔自治区',value: Math.round(Math.random()*1000)},
						{name: '江苏省',value: Math.round(Math.random()*1000)},
						{name: '浙江省',value: Math.round(Math.random()*1000)},
						{name: '江西省',value: Math.round(Math.random()*1000)},
						{name: '湖北省',value: Math.round(Math.random()*1000)},
						{name: '广西壮族自治区',value: Math.round(Math.random()*1000)},
						{name: '甘肃省',value: Math.round(Math.random()*1000)},
						{name: '山西省',value: Math.round(Math.random()*1000)},
						{name: '内蒙古自治区',value: Math.round(Math.random()*1000)},
						{name: '陕西省',value: Math.round(Math.random()*1000)},
						{name: '吉林省',value: Math.round(Math.random()*1000)},
						{name: '福建省',value: Math.round(Math.random()*1000)},
						{name: '贵州省',value: Math.round(Math.random()*1000)},
						{name: '广东省',value: Math.round(Math.random()*1000)},
						{name: '青海省',value: Math.round(Math.random()*1000)},
						{name: '西藏自治区',value: Math.round(Math.random()*1000)},
						{name: '四川省',value: Math.round(Math.random()*1000)},
						{name: '宁夏回族自治区',value: Math.round(Math.random()*1000)},
						{name: '海南省',value: Math.round(Math.random()*1000)},
						{name: '台湾省',value: Math.round(Math.random()*1000)},
						{name: '香港特别行政区',value: Math.round(Math.random()*1000)},
						{name: '澳门特别行政区',value: Math.round(Math.random()*1000)},
					]
				},
				{
					name: '小米手机',
					type: 'map',
					mapType: 'china',
					itemStyle:{
						normal:{label:{show:false}},
						emphasis:{label:{show:false}}
					},
					data:[
						{name: '北京市',value: Math.round(Math.random()*1000)},
						{name: '天津市',value: Math.round(Math.random()*1000)},
						{name: '上海市',value: Math.round(Math.random()*1000)},
						{name: '重庆市',value: Math.round(Math.random()*1000)},
						{name: '河北省',value: Math.round(Math.random()*1000)},
						{name: '安徽省',value: Math.round(Math.random()*1000)},
						{name: '新疆维吾尔自治区',value: Math.round(Math.random()*1000)},
						{name: '浙江省',value: Math.round(Math.random()*1000)},
						{name: '江西省',value: Math.round(Math.random()*1000)},
						{name: '山西省',value: Math.round(Math.random()*1000)},
						{name: '内蒙古自治区',value: Math.round(Math.random()*1000)},
						{name: '吉林省',value: Math.round(Math.random()*1000)},
						{name: '福建省',value: Math.round(Math.random()*1000)},
						{name: '广东省',value: Math.round(Math.random()*1000)},
						{name: '西藏自治区',value: Math.round(Math.random()*1000)},
						{name: '四川省',value: Math.round(Math.random()*1000)},
						{name: '宁夏回族自治区',value: Math.round(Math.random()*1000)},
						{name: '香港特别行政区',value: Math.round(Math.random()*1000)},
						{name: '澳门特别行政区',value: Math.round(Math.random()*1000)}
					]
				},
				{
					name: 'OPPO手机',
					type: 'map',
					mapType: 'china',
					itemStyle:{
						normal:{label:{show:false}},
						emphasis:{label:{show:false}}
					},
					data:[
						{name: '北京市',value: Math.round(Math.random()*1000)},
						{name: '天津市',value: Math.round(Math.random()*1000)},
						{name: '上海市',value: Math.round(Math.random()*1000)},
						{name: '广东省',value: Math.round(Math.random()*1000)},
						{name: '台湾省',value: Math.round(Math.random()*1000)},
						{name: '香港特别行政区',value: Math.round(Math.random()*1000)},
						{name: '澳门特别行政区',value: Math.round(Math.random()*1000)}
					]
				}
			]
		};
		mapChart.setOption(mapoption);
		$(window).resize(mapChart.resize);
	})
</script>
</body>
</html>
